import React from 'react';
import { useNavigate } from 'react-router-dom';
import './TabBarExample.css';

export default function TabBarExample() {
  const navigate = useNavigate();

  return (
    <div className="page-container">
      <div className="content">
        <h1>测试页面内容</h1>
        <p>这是一个使用原生实现的底部标签栏</p>
      </div>

      <div className="tab-bar">
        <div className="tab-item" onClick={() => navigate('/')}>
          <div className="tab-icon">🏠</div>
          <div className="tab-title">首页</div>
        </div>
        <div className="tab-item" onClick={() => navigate('/contacts')}>
          <div className="tab-icon">👥</div>
          <div className="tab-title">通讯录</div>
        </div>
        <div className="tab-item" onClick={() => navigate('/message')}>
          <div className="tab-icon">💬</div>
          <div className="tab-title">消息</div>
        </div>
        <div className="tab-item" onClick={() => navigate('/me')}>
          <div className="tab-icon">👤</div>
          <div className="tab-title">我的</div>
        </div>
      </div>
    </div>
  );
}
